<template>
  <div class="cart">
    <div class="addressBtn" v-if="!myaddress.userName">
      <van-button type="primary" @click="handleChooseAddress">添加收货地址</van-button>
    </div>
    <div class="address_detail" v-else>
      <div class="user_info">
        <div class="user_name text">收货人:{{myaddress.userName}}</div>
        <div class="user_address text">{{myaddress.all}}</div>
      </div>
      <div class="user_phone">{{myaddress.telNumber}}</div>
    </div>
    <!-- 购物车 -->
    <div class="cart_content">
      <!-- 文字 -->
      <div class="cart_title">购物车</div>
      <!-- 主体 -->
      <div class="cart_main">
        <!-- 有购物车 -->
        <div v-if="this.$store.state.cart.length !== 0">
          <!-- 商品 -->
          <div
            class="cart_item"
            v-for="(item,index) in cartList"
            :key="index"
            :goods_id="item.goods_id"
          >
            <!-- 复选框区 -->
            <div class="checkbox_wrap">
              <van-checkbox
                name="a"
                v-model="item.check"
                shape="square"
                ref="checkboxes"
                @click="handleItemChange(item.goods_id)"
              ></van-checkbox>
            </div>
            <!-- 图片 -->
            <div class="cart_pic" @click="toGoodsDetail(item.goods_id)">
              <img :src="item.goods_small_logo" />
            </div>
            <!-- 商品信息 -->
            <div class="cart_info">
              <div class="goods_name">{{item.goods_name}}</div>
              <div class="goods_price_wrap">
                <div class="goods_price">￥{{item.goods_price}}</div>
                <div class="goods_tool">
                  <!-- 减号 -->
                  <div class="btn" @click="editNum({operation:-1,goods_id:item.goods_id})">-</div>
                  <div class="goods_num">{{item.num}}</div>
                  <!-- 加号 -->
                  <div class="btn" @click="editNum({operation:1,goods_id:item.goods_id})">+</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 空购物车 --显示 -->
        <div v-else class="elseShow">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582298919125&di=0b3e6d7e9c216243f3724f7ef59b5271&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fe1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658"
          />
          <p>--购物车为空--</p>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <!-- 全选 -->
      <div class="check_all_wrap">
        <van-checkbox v-model="myAllCheck" shape="square">全选</van-checkbox>
      </div>
      <!-- 总价格 -->
      <div class="total_price_wrap">
        <div class="total_price">
          合计:
          <span class="price_text">{{tPrice}}</span>
        </div>
        <div class="yunfei">包含运费</div>
      </div>
      <!-- 结算 -->
      <div class="total_pay_wrap" @click="handleToPay">
        <span>结算({{tNum}})</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
      myaddress: {},
      allCheck: false // 是否全选
    }
  },
  computed: {
    ...mapGetters(['cartList', 'tPrice', 'tNum']),
    myAllCheck: {
      get() {
        return this.$store.getters.allCheckStatus
      },
      set(val) {
        console.log(val)
        this.onAllCheck(val)
      }
    }
  },
  methods: {
    ...mapActions(['onAllCheck', 'editNum', 'initCart']),
    // 点击结算
    handleToPay() {
      if (!this.myaddress.userName) {
        this.$toast('请添加地址')
        return
      }
      if (this.totalNum === 0) {
        this.$toast('请选择商品')
        return
      }
      this.$router.push('/pay')
    },
    // 勾选改变
    handleItemChange(goods_id) {
      console.log(goods_id)
      const index = this.cartList.findIndex(v => v.goods_id === goods_id)
      this.cartList[index].check = !this.cartList[index].check // 取反
      // localStorage.setItem('cart', JSON.stringify(this.cart))
    },
    // 获取地址
    handleChooseAddress() {
      console.log('收货地址')
      this.myaddress = {
        userName: '张三',
        all: '广东省广州市海珠区新港中路397号',
        telNumber: '020-81167888'
      }
      sessionStorage.setItem('myaddress', JSON.stringify(this.myaddress))
    },
    // 增减
    // async editNum(operation, id) {
    //   console.log(operation, id)
    // },
    // 点击全选
    // handleALlCheck(index) {
    // console.log(index)
    // this.allCheck = !this.allCheck
    // this.onAllCheck()
    // },
    // 设置购物车状态: 总数 总价 勾选
    setCart(cart) {},
    toGoodsDetail(goods_id) {
      this.$router.push({ name: 'GoodsDetail', params: { goods_id: goods_id } })
    }
  },
  // 监听页面显示
  created() {
    // this.initCart()
    // console.log(this.cartListData)
    // 获取地址
    this.myaddress = JSON.parse(sessionStorage.getItem('myaddress')) || {}
    // 更新购物车
    // this.cart = JSON.parse(localStorage.getItem('cart')) || []
    // 调用
    // this.setCart(this.cart)
  },
  mounted() {}
}
</script>

<style lang='less' scope>
.cart {
  padding: 10px;
  text-align: center;

  // 按钮--添加地址
  .addressBtn {
    width: 100%;
    display: flex;
    justify-content: center;
    // align-items: center;
    margin-bottom: 10px;
  }
  // 有地址
  .address_detail {
    width: 100%;
    display: flex;
    font-size: 14px;

    .user_info {
      flex: 5;
      .text {
        text-align: left;
      }
    }

    .user_phone {
      flex: 3;
      text-align: center;
    }
  }
}

// 购物车区域
.cart_content {
  width: 100%;
  // 购物车  文字
  .cart_title {
    padding: 10px;
    font-size: 18px;
    text-align: left;
    color: var(--themeColor);
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }

  .cart_main {
    width: 100%;
    .elseShow {
      > img {
        width: 100%;
      }
    }
    .cart_item {
      padding: 10px;
      display: flex;
      border-bottom: 1px solid #ccc;

      .checkbox_wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .cart_pic {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;

        img {
          width: 80%;
        }
      }

      .cart_info {
        flex: 4;
        display: flex;
        // 上下排
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        // 上 - 名字
        .goods_name {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          color: #666;
        }

        // 下 - 价格
        .goods_price_wrap {
          width: 100%;
          display: flex;
          justify-content: space-between;

          // 价格数字
          .goods_price {
            color: var(--themeColor);
            font-size: 17px;
          }

          // 增减按钮
          .goods_tool {
            display: flex;
            justify-content: center;
            align-items: center;

            .btn {
              width: 27.5px;
              height: 27.5px;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid #ccc;
            }

            .goods_num {
              width: 27.5px;
              height: 27.5px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
}

// 底部
.footer {
  position: fixed;
  left: 0;
  bottom: 50px;
  width: 100%;
  height: 45px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

  // 左
  .check_all_wrap {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // 中
  .total_price_wrap {
    flex: 4;
    text-align: right;
    padding-right: 7.5px;

    .total_price {
      .price_text {
        color: var(--themeColor);
        font-size: 17px;
        font-weight: 600;
      }
    }
  }

  // 右
  .total_pay_wrap {
    flex: 3;
    background-color: var(--themeColor);
    height: 100%;
    color: #fff;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
